<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		56666
	</div>
	<div id="div">
		23i423h4j234
	</div>
	<div class="header">
		时代峰峻水电费
	</div>
</body>
<script>
	// jq 都用过吧？
	// $('div').css('color','red')
	(function(global){
		
		function JQuery(selector){

			return  new F(selector)
		}
		function F(selector){
			// this.elements = document.getElementsByTagName(selector);
			const elements = document.querySelectorAll(selector)  
			for (let i = 0;i<elements.length;i++){
				this[i] = elements[i]
			}
			this.length = elements.length
			//这个是es5中的  有兼容性问题
			//局限性  ？  z只能获取标签元素   $('#div') $('.header')

		}

		F.prototype ={
			constructor:F,
			css(name,value){
				for(let i = 0;i<this.elements.length;i++ ){
					let ele = this.elements[i];
					ele.style[name] = value
				}
			},
			hide(){
				for(let i = 0;i<this.elements.length;i++ ){
					let ele = this.elements[i];

					ele.style['display'] = 'none'
				}
			}
		}

		//node 我还有办法说嘛？

		// global.jquery  = JQuery;
		
		// global.$  = JQuery
		// 相当于
			
			//jq为了后续的操作方便  他把所有的dom元素都放在了对象上面  让自己变成了一个数组  （伪数组）
		global.$ = global.jquery  = JQuery

	})(window);

   
	// 作业2:我们都知道  vue里面有一个 v-model  实现数据双向绑定  作业 封装一个方法  实现该功能   周日晚上之前 交

// <input type="text" name="" value="" v-model='msg'>

// <p>{{msg}}</p> 事件的触发时机？ input？还是blur？ change 当我们这些事件发生时 我干嘛？

Object.defineProperty(object,value,des)   





</script>
</html>